<template>
  <!-- <div class="m-app-header clearfix">
    <h1 class="brand fl"></h1>
    <ul class="fl nav">
      <router-link tag="li" to="/" @click.native="onPushHome">首页</router-link>
    </ul>
    <ul class="person fr">
      <li @click="login">您好，{{this.$store.getters.userName}}</li>
      <li class="exit" @click="onExit">[ 退出 ]</li>
    </ul>
  </div> -->
  <div class="m-app-header clearfix">
    <!-- 左侧 -->
    <div class="fl">
      <span class="img iconHome"></span>
      <router-link to="/" class="textC" @click.native="onPushHome">好下单首页</router-link>
      <span class="textC marL" @click="login">Hi，{{this.$store.getters.userName}}</span>
      <span class="img iconStore marL"></span>
      <span class="textC hoverC" @click="onExit">退出</span>
    </div>
    <!-- 右侧 -->
    <!-- <div class="fr">
      <span class="textC marR">系统消息</span>
      <span class="textC marR">商家中心</span>
      <span class="textC marR">金融服务</span>
      <span class="textC marR">商学院</span>
      <span class="textC">手机版</span>
    </div> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      onPushHome() {
        if (this.$store.getters.aBreads.length === 0) return
        this.$store.commit('resetBreads', [{ name: '首页' }])
      },
      onExit() {
        // 清空用户信息
        this.$store.commit('clearUserInfo')
        this.$router.push('/login')
      },

      /**
       * 点击去登录
       */
      login() {
        // 如果当前token存在，则不跳登录页面
        if (this.$store.getters.token) {
          return
        }

        // 如果token不存在，则调到登录页面
        this.onExit()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  img {
    width: 100%;
    height: 100%;
  }
  .textC {
    color: #8E8D8D;
  }
  .marL {
    margin-left: 35px;
  }
  .marR {
    margin-right: 50px;
  }
  .hoverC {
    cursor: pointer;
  }
  .m-app-header {
    background: #ffffff;
    height: 35px;
    line-height: 36px;
    padding: 0 30px;
    position: fixed;
    top: 0;
    z-index: 12;
    width: 100%;
    left: 0;
    right: 0;
    // background-color: #f0f0f0;
    .img {
      display: inline-block;
      vertical-align: middle;
    }
    .iconHome {
      width: 20px;
      height: 20px;
      background: url('../../assets/new/icon_home.png') no-repeat;
    }
    .iconStore {
      width: 20px;
      height: 20px;
      background: url('../../assets/new/icon_bussiness.png') no-repeat;
    }
  }




  // .base-h {
  //   height: 54px;
  //   line-height: 54px;
  //   color: $color-white;
  // }
  // .m-app-header {
  //   height: 35px;
  //   padding: 0 30px;
  //   background: #f7f7f7;
  //   .brand {
  //     @extend .base-h;
  //     background: url('../../assets/logo.png');
  //     width: 200px;
  //     font-size: 20px;
  //     margin-top: -1px;
  //   }
  //   .nav {
  //     li {
  //       @extend .base-h;
  //       float: left;
  //       font-size: 20px;
  //       cursor: pointer;
  //     }
  //   }
  //   .person {
  //     li {
  //       @extend .base-h;
  //       float: left;
  //       font-size: 16px;
  //       &.exit {
  //         margin-left: 40px;
  //         color: $color-main;
  //         cursor: pointer;
  //       }
  //     }
  //   }
  // }
</style>